<template>
  <el-main>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>{{ breadcrumbNameP }}</el-breadcrumb-item>
      <el-breadcrumb-item>{{ breadcrumbName }}</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索栏 -->
    <el-form
      :inline="true"
      :model="formInline"
      class="el-form query-form el-form--label-right el-form--inline"
    >
      <el-form-item label="标题">
        <el-input
          size="small"
          v-model="formInline.search"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <el-select v-model="formInline.type" placeholder="请选择" filterable>
          <el-option
            v-for="(item, index) in truckType"
            :key="index"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button
          size="small"
          type="primary"
          @click="onSearch"
          icon="el-icon-search"
          >查 询</el-button
        >
        <el-button
          size="small"
          type="primary"
          @click="handleShow"
          icon="el-icon-plus"
          >添 加</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 表格列表 -->
    <el-table
      :data="tableData"
      style="margin-top: 30px"
      @selection-change="handleSelectionChange"
      reserve-selection="false"
    >
      <el-table-column label="序号" width="80">
        <template slot-scope="scope">
          <!-- 判断当前行是否有父级，如果没有，则显示当前页的序号，如果有，则显示子级序号 -->
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="title" label="标题" width="200"></el-table-column>
      <!-- <el-table-column prop="type" label="分类"></el-table-column> -->
      <el-table-column
        prop="createtime"
        label="创建时间"
        width="100"
      ></el-table-column>
      <el-table-column prop="imgs" width="300" label="封面图">
        <template slot-scope="scope">
          <div style="display: flex">
            <!-- {{ scope.row.imgs }} -->
            <div
              v-for="(item, index) in getArrLust(scope.row.imgs)"
              :key="index"
              style="padding-right: 10px"
            >
              <img
                :src="item != '' ? common.getUrl(item) : ''"
                min-width="70"
                height="70"
              />
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="content" label="详细内容" width="250">
        <template slot-scope="scope">
          <!-- <el-tooltip :content="scope.row.content" placement="top" class="custom-width"> -->
          <div class="ellipsis-2-lines">{{ scope.row.content }}</div>
          <!-- </el-tooltip> -->
        </template>
      </el-table-column>
      <el-table-column prop="status" label="类型" width="100">
        <template slot-scope="scope">
          <div>{{ formatSatu(scope.row.type) }}</div>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="status" label="状态" width="100">
        <template slot-scope="scope">
          <div>{{ formatPassCheck(scope.row.status) }}</div>
        </template>
      </el-table-column> -->
      <el-table-column label="操作" :width="500" fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="primary"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
          <el-button
            size="mini"
            type="default"
            @click="handleDetail(scope.$index, scope.row)"
            >查看</el-button
          >

          <el-button
            size="small"
            type="default"
            @click="handleReser(scope.$index, scope.row)"
            >预约情况</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="formInline.page"
      :page-size="formInline.limit"
      :hide-on-single-page="true"
      layout="total, prev, pager, next"
      :total="total"
    >
    </el-pagination>

    <!-- 添加活动 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="addDialogVisible"
      width="40%"
      center
      :before-close="beforeClose"
      custom-class="center_dislog"
    >
      <el-form
        ref="addForm"
        :model="addForm"
        label-width="130px"
        :rules="addRules"
      >
        <div class="title_import_title"></div>
        <el-form-item label="标题" prop="title">
          <el-input v-model="addForm.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <!-- <el-form-item label="排序号" prop="sortID">
                    <el-input v-model="addForm.sortID"></el-input>
                </el-form-item> -->
        <el-form-item label="分类" prop="type">
          <el-select v-model="addForm.type" placeholder="请选择" filterable>
            <el-option
              v-for="(item, index) in truckType"
              :key="index"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详细内容" prop="content">
          <el-input v-model="addForm.content" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="文章封面" prop="imgs">
          <el-upload
            class="upload-demo"
            action="/api/upload"
            :headers="headers"
            :multiple="true"
            :limit="2"
            :file-list="fileList"
            :on-success="handleUploadSuccess"
            :on-error="handleUploadError"
            :on-remove="handleRemove"
            :before-upload="beforeUpload"
            accept="image/*"
            list-type="picture-card"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <div class="el-upload__tip">只能上传图片，最多2张</div>
        </el-form-item>
        <el-form-item label="预约日期" prop="bad_time">
          <el-date-picker
            type="dates"
            v-model="addForm.bad_time"
            format="yyyy - MM - dd "
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
            @change="changeDatePicker"
            :disabledDate="disablePastDates"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          v-for="(domain, index) in demoney"
          :label="'时间段' + (index + 1)"
          :key="domain.key"
          prop="domains"
        >
          <el-time-picker
            placeholder="选择时间"
            format="HH:mm"
            value-format="HH:mm"
            v-model="domain.starttime"
            style="width: 30%"
          ></el-time-picker>
          ~
          <el-time-picker
            placeholder="选择时间"
            format="HH:mm"
            value-format="HH:mm"
            v-model="domain.endtime"
            style="width: 30%"
          ></el-time-picker>
          <el-input
            v-model="domain.maxpeople"
            placeholder="人数"
            style="width: 25%"
          ></el-input>
          <el-button
            icon="el-icon-plus"
            size="mini"
            circle
            @click="addDomain()"
            v-show="index == 0"
            style="margin-left: 10px"
          ></el-button>
          <el-button
            icon="el-icon-minus"
            size="mini"
            circle
            @click.prevent="removeDomain(domain)"
            v-show="index != 0"
          ></el-button>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="beforeClose">取 消</el-button>
        <el-button type="primary" :disabled="isDisabled" @click="addSubmit"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 预约情况 -->
    <el-dialog
      :title="dialogReserTitle"
      :visible.sync="addDialogReser"
      width="70%"
      hight="500px"
      center
      :before-close="beforeReserClose"
      custom-class="center_dislog"
    >
      <el-form
        :inline="true"
        :model="formInline"
        class="el-form query-form el-form--label-right el-form--inline"
      >
        <el-form-item label="日期">
          <el-date-picker
            v-model="formInline.plan_send_time"
            type="date"
            placeholder="选择日期"
            format="yyyy - MM - dd "
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button
            size="small"
            type="primary"
            @click="onSearch"
            icon="el-icon-search"
            >查 询</el-button
          >
        </el-form-item>
      </el-form>

      <el-table
        :data="showList"
        style="margin-top: 30px"
        @selection-change="handleSelectionChange"
        reserve-selection="false"
        ref="multipleTable"
      >
        <!-- <el-table-column type="selection" width="50" fixed="left" :selectable="selectable"></el-table-column> -->

        <el-table-column prop="daytime" label="日期"></el-table-column>
        <el-table-column prop="" label="时间段">
          <template slot-scope="scope">
            {{ scope.row.starttime }} ~ {{ scope.row.endtime }}
          </template>
        </el-table-column>
        <el-table-column
          prop="reservationpeople"
          label="已预约"
        ></el-table-column>
        <el-table-column prop="maxpeople" label="名额"></el-table-column>
        <!-- <el-table-column prop="zt" label="状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              :active-text="switchselectValue"
              @change="changeSwitch"
            ></el-switch>
          </template>
        </el-table-column> -->
        <el-table-column prop="creatTime" label="查看">
          <template slot-scope="scope">
            <!-- <el-button size="mini" type="primary" @click="handleShow(scope.$index, scope.row)">添加</el-button> -->
            <el-button
              size="mini"
              type="primary"
              @click="handleUser(scope.$index, scope.row)"
              >预约名单</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 预约名单 -->
    <el-dialog
      :title="dialogUserTitle"
      :visible.sync="addDialogUser"
      width="50%"
      hight="500px"
      center
      :before-close="beforeUserClose"
      custom-class="center_dislog"
    >
      <el-table
        :data="userTimeList"
        style="margin-top: 30px"
        @selection-change="handleSelectionChange"
        reserve-selection="false"
        ref="multipleTable"
      >
        <el-table-column prop="reservationName" label="姓名"></el-table-column>
        <el-table-column prop="phone" label="手机号"></el-table-column>
        <el-table-column prop="idNumber" label="身份证"></el-table-column>
        <el-table-column prop="creatime" label="预约时间"></el-table-column>
      </el-table>

      <el-pagination
        @current-change="handleCurrentChangeUser"
        :current-page="formInlineUser.pageSize"
        :page-size="formInlineUser.pageNum"
        :hide-on-single-page="true"
        layout="total, prev, pager, next"
        :total="formInlineUser.total"
      >
      </el-pagination>
    </el-dialog>
  </el-main>
</template>
<script>
import { mapState } from "vuex";
import {
  crateReservation,
  getReservationPageList,
  getReservation,
  delReservation,
  getReservationDetail,
} from "../../api.js";
export default {
  name: "mangeOrderActiveList",
  data() {
    return {
      fileList: [], // 用于存储上传的文件列表
      headers: {},
      imageArr: [],
      dialogReserTitle: "预约情况",
      addDialogReser: false,
      switchselectValue: "停止",
      dialogUserTitle: "预约名单",
      addDialogUser: false,
      dialogActiveitle: "预约设置",
      addDialogActiveVisible: false,
      isAdd: true,
      isTimeAdd: true,
      isDisabled: false,
      addDialogVisible: false,
      addDisabled: false,
      is_check: false,
      breadcrumbName: "",
      breadcrumbPath: "",
      breadcrumbNameP: "",
      tableData: [
        {
          id: 1,
          sortID: 1,
          title: "讲座展览活动",
          type: "活动",
          content: "讲座展览活动讲座展览活动内容内容",
          creatTime: "2025-02-29",
          coverImg: "",
        },
      ],
      userData: [
        {
          id: 1,
          username: "用户1",
          phone: "15879990987",
          card: "35672892817283930",
        },
        {
          id: 2,
          username: "用户1",
          phone: "15879990987",
          card: "35672892817283930",
        },
        {
          id: 3,
          username: "用户1",
          phone: "15879990987",
          card: "35672892817283930",
        },
        {
          id: 4,
          username: "用户1",
          phone: "15879990987",
          card: "35672892817283930",
        },
        {
          id: 5,
          username: "用户1",
          phone: "15879990987",
          card: "35672892817283930",
        },
        {
          id: 6,
          username: "用户1",
          phone: "15879990987",
          card: "35672892817283930",
        },
      ],

      agreeData: [
        {
          id: 1,
          timeange: "9:00-11:00",
          useNumber: 10,
          number: 50,
          status: true,
        },
      ],
      //查询栏默认展示数据
      formInlineD: {
        dataValue: [],
        value: "",
      },

      formInline: {
        search: "",
        starttime: "",
        endtime: "",
        page: 1,
        limit: 5,
        type: "",
      },

      formInlineUser: {
        total: 0,
        pageNum: 10,
        pageSize: 1,
        lotid: "",
        reservationId: "",
      },

      demoney: [{ starttime: "", endtime: "", maxpeople: 0 }],
      //   添加参数
      addForm: {
        title: "",
        type: "",
        content: "",
        imgs: "",
        status: 0,
        bad_time: "",
        list: [],
      },
      //分页
      total: 0,
      TimeType: [],
      needData: [],
      truckType: [
        { name: "活动预约", id: 3 },
        { name: "参观预约", id: 4 },
      ],
      dialogTitle: "",
      showList: [], // 用于展示预约详情的参数

      userTimeList: [],
      addRules: {
        transport_sn: [
          {
            required: true,
            message: "请输入运单号",
            trigger: "blur",
          },
        ],
        truck_type: [
          {
            required: true,
            message: "请选择车辆类型",
            trigger: "blur",
          },
        ],
        publish_phone: [
          {
            required: true,
            message: "请输入发布人联系电话",
            trigger: "blur",
          },
        ],
        delivery_time: [
          {
            required: true,
            message: "请选择日期",
            trigger: "blur",
          },
        ],
        transport_total_amt: [
          {
            required: true,
            message: "请输入价格",
            trigger: "blur",
          },
        ],
        transport_weight: [
          {
            required: true,
            message: "请输入载重量",
            trigger: "blur",
          },
        ],
        delivery_need: [
          {
            required: true,
            message: "配送配置",
            trigger: "change",
          },
        ],
        nucleic_acid: [
          {
            required: true,
            message: "请选择核酸",
            trigger: "blur",
          },
        ],
        green_code: [
          {
            required: true,
            message: "请选择行程码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  async mounted() {
    this.breadcrumbName = this.$route.query.breadcrumbName;
    this.breadcrumbPath = this.$route.query.breadcrumbPath;
    this.breadcrumbNameP = this.$route.query.breadcrumbNameP;
    var date = new Date();
    var Simdate = this.DateTime(date.getTime() + 24 * 60 * 60 * 1000);
    this.formInlineD.value = Simdate;
    // 暂时注册
    this.getMuseumPageListList(this.formInline);
  },
  methods: {
    // crateReservation
    // crateReservationsLot
    // getReservationPageList

    getMuseumPageListList(searchObj) {
      getReservationPageList(searchObj).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.records;
          this.total = res.data.total;
          console.log(res.data);
        } else {
          this.$message.error(res.msg);
        }
      });
    },

    // 上传成功回调
    handleUploadSuccess(response, file) {
      this.imageArr.push(response.data);
    },
    // 上传失败回调
    handleUploadError(err) {
      this.$message.error("文件上传失败，请稍后重试");
    },
    // 删除文件回调
    handleRemove(file, fileList) {
      this.imageArr = [];
      fileList.map((item) => {
        this.imageArr.push(item.response.data);
      });
    },
    // 上传前校验
    beforeUpload(file) {
      const isImage = file.type.startsWith("image/"); // 校验是否为图片
      const isSizeValid = file.size / 1024 / 1024 < 5; // 校验图片大小，限制为 3MB

      if (!isImage) {
        this.$message.error("只能上传图片格式");
        return false;
      }
      if (!isSizeValid) {
        this.$message.error("图片大小不能超过 5MB");
        return false;
      }
      return true;
    },
    // 查看预约情况
    handleReser(index, row) {
      console.log(index, row);
      this.addDialogReser = true;
      this.getReservationShow(row);
    },

    getReservationShow(row) {
      let data = {
        id: row.id,
      };
      getReservation(data).then((res) => {
        if (res.code == 200) {
          this.showList = res.data.list;
        } else {
          this.$message.error(res.msg);
        }
      });
    },

    beforeReserClose() {
      this.addDialogReser = false;
    },
    handleUser(index, row) {
      this.addDialogUser = true;
      this.getReservationDetail(row);
    },
    getReservationDetail(row) {
      this.formInlineUser.lotid = row.id;
      this.formInlineUser.reservationId = row.reservationid;
      getReservationDetail(this.formInlineUser).then((res) => {
        if (res.code == 200) {
          console.log(res.data);
          this.userTimeList = res.data.records;
          this.formInlineUser.total = res.data.length;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    beforeUserClose() {
      this.addDialogUser = false;
    },

    changeSwitch(val) {
      console.log("val", val);
      if (val == 0) {
        this.switchselectValue = "停止";
      } else {
        this.switchselectValue = "启用";
      }
      // this.formInline.transport_state = val;
      // this.getMuseumPageListList(this.formInline)
    },

    //编辑
    handleEdit(index, row) {
      this.getReservation(row);
      this.isAdd = false;
      this.dialogTitle = "编辑";
      this.addForm.id = row.id;
      this.addForm.title = row.title;
      this.addForm.type = row.type;
      this.addForm.content = row.content;
      this.addForm.imgs = row.imgs;
      if (row.imgs != "") {
        this.imageArr = row.imgs.split(",");
        this.fileList = row.imgs.split(",").map((item, index) => ({
          name: index,
          url: this.common.getUrl(item),
          status: "success",
        }));
      }
      this.addDialogVisible = true;
    },

    async getReservation(row) {
      let data = {
        id: row.id,
      };
      await getReservation(data).then((res) => {
        if (res.code == 200) {
          // this.addForm.bad_time
          // this.demoney
          this.addForm.bad_time = [
            ...new Set(res.data.list.map((item) => item.daytime)),
          ];

          let listData = [];
          res.data.list.map((item) => {
            listData.push({
              starttime: item.starttime,
              endtime: item.endtime,
              maxpeople: item.maxpeople,
            });
          });
          const seen = new Set();
          const uniqueArray = listData.filter((obj) => {
            const key = `${obj.starttime}-${obj.endtime}-${obj.maxpeople}`;
            return seen.has(key) ? false : seen.add(key);
          });
          this.demoney = uniqueArray;
        } else {
          this.$message.error(res.msg);
        }
      });
    },

    handleCurrentChangeUser(val) {
      this.formInlineUser.pageSize = val;
    },
    //表格分页
    handleCurrentChange(val) {
      this.formInline.page = val;
      this.getMuseumPageListList(this.formInline);
    },
    //表格查询
    onSearch() {
      this.formInline.page = 1;
      this.getMuseumPageListList(this.formInline);
    },
    handleShow(index, row) {
      this.isAdd = true;
      this.dialogTitle = "添加";
      this.addDialogVisible = true;
    },
    //查看
    handleDetail(index, row) {
      this.$router.push({
        path: "/mange/active_detail",
        query: {
          id: row.id,
          state: 0,
        },
      });
    },
    // 禁用时间
    disablePastDates(date) {
      const today = new Date();
      today.setHours(0, 0, 0, 0); // 去掉时间部分，只比较日期
      console.log("date < today", date < today);
      return date < today; // 如果日期在今天之前，则禁用
    },
    formatPassCheck(cellValue) {
      if (cellValue == 0) {
        return "已发布";
      } else if (cellValue == 1) {
        return "禁用中";
      }
    },
    formatSatu(cellValue) {
      if (cellValue == 3) {
        return "活动预约";
      } else if (cellValue == 4) {
        return "参观预约";
      }
    },
    //刪除
    handleDelete(index, row) {
      var _this = this;
      _this
        .$confirm("此操作將刪除该数据, 是否继续？", "提 示", {
          confirmButtonText: "确 定",
          cancelButtonText: "取 消",
          center: true,
        })
        .then(() => {
          var data = {
            id: row.id,
          };
          delReservation(data).then((res) => {
            if (res.code == 200) {
              _this.getMuseumPageListList(_this.formInline);
              _this.$message.success("删除成功");
            } else {
              this.$message.error(res.msg);
            }
          });
        })
        .catch(() => {});
    },

    //添加活动
    addSubmit() {
      this.$refs["addForm"].validate((valid) => {
        if (valid) {
          var _this = this;
          _this.addForm.parentId = this.indexId == "" ? 0 : this.indexId;
          _this.addForm.imgs = this.imageArr.join(",");
          let listData = [];
          console.log("listData", this.addForm);
          for (const item of this.addForm.bad_time) {
            for (const element of this.demoney) {
              listData.push({
                daytime: item,
                starttime: element.starttime,
                endtime: element.endtime,
                maxpeople: element.maxpeople,
              });
            }
          }
          _this.addForm.list = listData;
          var dataObj = JSON.parse(JSON.stringify(_this.addForm));
          if (_this.isAdd) {
            crateReservation(dataObj).then((res) => {
              if (res.code == 200) {
                _this.addDialogVisible = _this.getMuseumPageListList(
                  _this.formInline
                );
                _this.$refs.addForm.resetFields();
                _this.beforeClose();
                _this.isDisabled = false;
                _this.$message.success("添加成功");
              } else {
                _this.isDisabled = false;
                this.$message.error(res.msg);
              }
            });
          } else {
            let listData = [];
            for (const item of this.addForm.bad_time) {
              for (const element of this.demoney) {
                listData.push({
                  daytime: item,
                  starttime: element.starttime,
                  endtime: element.endtime,
                  maxpeople: element.maxpeople,
                });
              }
            }
            _this.addForm.list = listData;
            var dataObj = JSON.parse(JSON.stringify(_this.addForm));
            crateReservation(dataObj).then((res) => {
              if (res.code == 200) {
                _this.$message.success("编辑成功");
                _this.$refs.addForm.resetFields();
                _this.beforeClose();
                _this.getMuseumPageListList(_this.formInline);
                _this.isDisabled = false;
                _this.addDialogVisible = false;
              } else {
                _this.isDisabled = false;
                this.$message.error(res.ErrorMsg);
              }
            });
          }
        }
      });
    },

    getArrLust(img) {
      var list = img ? img.split(",") : [];
      return list;
    },
    removeDomain(item) {
      var index = this.demoney.indexOf(item);
      if (index !== -1) {
        this.demoney.splice(index, 1);
      }
    },
    addDomain(item) {
      this.demoney.push({
        starttime: "",
        endtime: "",
        maxpeople: 0,
      });
    },
    beforeCloseActive() {
      this.addDialogActiveVisible = false;
    },
    beforeClose() {
      this.addDialogVisible = false;
      this.$refs.addForm.resetFields();
      this.addForm = {
        title: "",
        type: "",
        content: "",
        imgs: "",
        status: 0,
        bad_time: "",
        list: [],
      };
      this.demoney = [{ starttime: "", endtime: "", maxpeople: 0 }];
      this.fileList = [];
    },

    changeDatePicker(val) {
      console.log("val", val);
      console.log(this.addForm.bad_time);
    },

    DateTime(time) {
      var oDate = new Date(time),
        oYear = oDate.getFullYear(),
        oMonth = oDate.getMonth() + 1,
        oDay = oDate.getDate(),
        oTime = oYear + "-" + this.getzf(oMonth) + "-" + this.getzf(oDay);
      return oTime;
    },
    getzf(num) {
      if (parseInt(num) < 10) {
        num = "0" + num;
      }
      return num;
    },
    formatDept(row, column, cellValue) {
      return Array.prototype.join.call(cellValue, "，");
    },
    handleSelectionChange(selection) {
      //   if (selection.length == 0) {
      //     this.is_check = false;
      //     this.updateFrom.transport_snArr = "";
      //   } else {
      //     this.updateFrom.transport_snArr = "";
      //     var UnifiedTimesNoArr = [];
      //     for (var i in selection) {
      //       UnifiedTimesNoArr.push(selection[i].transport_sn);
      //       this.updateFrom.transport_snArr = UnifiedTimesNoArr.join(",");
      //     }
      //     this.is_check = true;
      //   }
    },
  },
  computed: {
    ...mapState({
      baseUrl: (state) => state.baseUrl,
      Token: (state) => state.access_token,
    }),
  },
};
</script>

<style scoped>
.title_import_title {
  padding: 0 20px;
  padding-bottom: 30px;
  font-weight: bold;
  font-size: 16px;
  color: #333;
}

.el-dialog__header {
  text-align: center;
}

.el-dialog__footer {
  text-align: center !important;
}

.img-table {
  width: 50px;
  height: 50px;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.mun-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-left: 56px;
  padding-bottom: 20px;
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
